import { EditableTwoColumnDisplay } from '../EditableTwoColumnDisplay';
import EmptyDisplay from '../EmptyDisplay';
import TwoColumnDisplay from '../TwoColumnDisplay';

export const useContainerRenderer = () => {
  const renderPortsList = (
    ports: API.PortMapping[],
    isEditing: boolean,
    onPortsChange?: (ports: API.PortMapping[]) => void,
  ) => {
    if (ports.length === 0 && !isEditing) return <EmptyDisplay />;

    const data = ports.map((port) => ({
      left: port.host,
      right: port.container,
    }));

    if (!isEditing) {
      return (
        <TwoColumnDisplay
          leftTitle="主机端口"
          rightTitle="容器端口"
          data={data}
        />
      );
    }

    return (
      <EditableTwoColumnDisplay
        leftTitle="主机端口"
        rightTitle="容器端口"
        data={data}
        isEditing={isEditing}
        onAdd={() => {
          const newPorts = [...ports, { host: 0, container: 0 }];
          onPortsChange?.(newPorts);
        }}
        onDelete={(index) => {
          const newPorts = ports.filter((_, i) => i !== index);
          onPortsChange?.(newPorts);
        }}
        onLeftChange={(index, value) => {
          const newPorts = [...ports];
          newPorts[index] = { ...newPorts[index], host: Number(value) || 0 };
          onPortsChange?.(newPorts);
        }}
        onRightChange={(index, value) => {
          const newPorts = [...ports];
          newPorts[index] = {
            ...newPorts[index],
            container: Number(value) || 0,
          };
          onPortsChange?.(newPorts);
        }}
      />
    );
  };

  const renderVolumesList = (
    volumes: API.VolumeMapping[],
    isEditing: boolean,
    onVolumesChange?: (volumes: API.VolumeMapping[]) => void,
  ) => {
    if (volumes.length === 0 && !isEditing) return <EmptyDisplay />;

    const data = volumes.map((volume) => ({
      left: volume.host,
      right: volume.container,
    }));

    if (!isEditing) {
      return (
        <TwoColumnDisplay
          leftTitle="主机路径"
          rightTitle="容器路径"
          data={data}
        />
      );
    }

    return (
      <EditableTwoColumnDisplay
        leftTitle="主机路径"
        rightTitle="容器路径"
        data={data}
        isEditing={isEditing}
        onAdd={() => {
          const newVolumes = [...volumes, { host: '', container: '' }];
          onVolumesChange?.(newVolumes);
        }}
        onDelete={(index) => {
          const newVolumes = volumes.filter((_, i) => i !== index);
          onVolumesChange?.(newVolumes);
        }}
        onLeftChange={(index, value) => {
          const newVolumes = [...volumes];
          newVolumes[index] = { ...newVolumes[index], host: value };
          onVolumesChange?.(newVolumes);
        }}
        onRightChange={(index, value) => {
          const newVolumes = [...volumes];
          newVolumes[index] = { ...newVolumes[index], container: value };
          onVolumesChange?.(newVolumes);
        }}
      />
    );
  };

  const renderEnvironmentList = (
    environment: API.EnvironmentVariable[],
    isEditing: boolean,
    onEnvironmentChange?: (environment: API.EnvironmentVariable[]) => void,
  ) => {
    if (environment.length === 0 && !isEditing) return <EmptyDisplay />;

    const data = environment.map((env) => ({
      left: env.key,
      right: env.value,
    }));

    if (!isEditing) {
      return (
        <TwoColumnDisplay leftTitle="变量名" rightTitle="变量值" data={data} />
      );
    }

    return (
      <EditableTwoColumnDisplay
        leftTitle="变量名"
        rightTitle="变量值"
        data={data}
        isEditing={isEditing}
        onAdd={() => {
          const newEnv = [...environment, { key: '', value: '' }];
          onEnvironmentChange?.(newEnv);
        }}
        onDelete={(index) => {
          const newEnv = environment.filter((_, i) => i !== index);
          onEnvironmentChange?.(newEnv);
        }}
        onLeftChange={(index, value) => {
          const newEnv = [...environment];
          newEnv[index] = { ...newEnv[index], key: value };
          onEnvironmentChange?.(newEnv);
        }}
        onRightChange={(index, value) => {
          const newEnv = [...environment];
          newEnv[index] = { ...newEnv[index], value: value };
          onEnvironmentChange?.(newEnv);
        }}
      />
    );
  };

  return {
    renderPortsList,
    renderVolumesList,
    renderEnvironmentList,
  };
};
